<template>
  <!-- 测试样例输入表单 -->
  <el-form class="problem-text-case " label-position="top">
    <div v-for="(item,index) in value.testInOuts" :key="index" class="background-block">
      <el-form-item>
        <template #label>
          <div style="display: flex; justify-content: space-between; width: 100%;">
            <span>{{ labelText }}#{{ index+1 }} 输入</span>
            <el-button size="small" type="danger" @click="deleteTestCaseHandler(index)">删除</el-button>
          </div>
        </template>
        <el-input style="white-space: pre-wrap" type="textarea" v-model="item.input"/>
      </el-form-item>
      <el-form-item :label="`${labelText}#${index + 1 } 输出`">
        <el-input type="textarea" v-model="item.output"/>
      </el-form-item>
      <el-form-item v-if="hasTip" label="提示"><el-input v-model="item.tip"/></el-form-item>
    </div>
    <div style="width: 100%; padding: 0" class="background-block" >
      <el-button style="width: 100%;" @click="addTestCaseHandler">{{ addButton }}</el-button>
    </div>
  </el-form>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'article-code-test-case',
  props: {
    modelValue: {},
    hasTip: {
      default: false
    },
    addButton: {
      default: '添加'
    },
    labelText: {
      default: '测试样例'
    }
  },
  computed: {
    value: {
      get () {
        return this.modelValue
      },
      set (value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  setup () {
    return {
      testCase: ref({
        problemId: 0,
        testInOuts: [{
          input: '',
          output: '',
          tip: '',
          rank: ''
        }],
        time_limit: 0,
        memory_limit: 0,
        rank: ''
      })
    }
  },
  methods: {
    addTestCaseHandler () {
      this.value.testInOuts.push({
        input: '',
        output: '',
        tip: '',
        rank: 0
      })
    },
    deleteTestCaseHandler (index) {
      this.value.testInOuts = this.value.testInOuts.filter(function (p1, p2) { return p2 !== index })
    }
  }
}
</script>

<style scoped>

</style>
